<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文档对象模型-文档之间的关系(Document Object Model - Relationships between Documents)</title>
  <!-- 
  在JavaScript的文档对象模型（DOM）中，文档之间的关系和属性主要涉及以下几个方面：

  文档对象模型（DOM）是 web 上构成文档结构和内容的对象的数据表示。本指南将介绍 DOM，研究 DOM 如何在内存中表示 HTML 文档以及如何使用 API 来创建 web 内容和应用程序。

  什么是 DOM？
  文档对象模型（DOM）是一个网络文档的编程接口。它代表页面，以便程序可以改变文档的结构、风格和内容。DOM 将文档表示为节点和对象；这样，编程语言就可以与页面交互。

  网页是一个既可以在浏览器窗口中显示，也可以作为 HTML 源代码的文档。在这两种情况下，它都是同一个文档，但文档对象模型（DOM）的表示方式使它可以被操作。作为一个面向对象的网页表示，它可以用脚本语言（如 JavaScript）进行修改。

  例如，DOM 中指定下面代码中的 querySelectorAll 方法必须要返回文档中所有 <p> 元素组成的列表：
    const paragraphs = document.querySelectorAll("p");
    // paragraphs[0] 是第一个 <p> 元素
    // paragraphs[1] 是第二个 <p> 元素，依此类推
    alert(paragraphs[0].nodeName);

  1. 文档对象（Document Object）
  - document：这是DOM的根对象，代表整个HTML或XML文档。通过document对象，可以访问和操作文档中的所有元素。

  2. 文档之间的关系
  - 父子关系：
    - 每个节点（如元素、文本等）都有一个父节点和零个或多个子节点。
    - 可以通过parentNode属性访问父节点，通过childNodes、firstChild、lastChild等属性访问子节点。

  - 兄弟关系：
    - 同一层级的节点称为兄弟节点。
    - 可以使用nextSibling和previousSibling属性访问相邻的兄弟节点。

  3. 文档类型
  - doctype：文档类型声明，表示文档的类型（如HTML或XML），通常位于文档的最顶部。
  - document.documentElement：返回文档的根元素（对于HTML文档，通常是<html>元素）。

  4. 嵌套文档
  - <iframe>：用于在当前文档中嵌入另一个文档。每个<iframe>都有自己的document对象，访问时需遵循同源策略。
  - contentDocument：可以通过iframe元素的contentDocument属性访问嵌套文档。

  5. 动态文档操作
  - 创建和修改节点：
    - 使用document.createElement()、document.createTextNode()等方法动态创建节点。
    - 使用appendChild()、removeChild()、replaceChild()等方法修改文档结构。

  6. 文档与窗口的关系
  - window对象：代表浏览器的窗口，document是window对象的一个属性。通过window.document可以访问当前窗口中的文档。

  7. 文档属性
  - document.title：获取或设置文档的标题。
  - document.URL：获取当前文档的完整URL。
  - document.body：访问文档的<body>元素。
  - document.forms：获取文档中所有的表单元素。
   -->
</head>

<body>

  <form action="/" method="post">
    <input type="text" name="username" />
  </form>

  <div id="parent">
    <p>Child 1</p>
    <p>Child 2</p>
  </div>

  <script>
    // 1. 获取文档属性
    const title = document.title;
    const url = document.URL;
    const body = document.body;
    const forms = document.forms;
    console.log("1. 获取文档属性", title, url, body, forms);

    // 2. 访问父节点和子节点
    const parent = document.getElementById('parent');
    const child1 = parent.children[0];
    const child2 = parent.children[1];
    console.log("2. 访问父节点和子节点", parent, child1, child2);

    // 3. 访问兄弟节点
    const nextSibling = child1.nextSibling;
    const previousSibling = child2.previousSibling;
    console.log("3. 访问兄弟节点", nextSibling, previousSibling);

    // 4. 访问文档类型
    const doctype = document.doctype;
    const htmlElement = document.documentElement;
    console.log("4. 访问文档类型", doctype, htmlElement);

    // 5. 动态创建节点
    const newParagraph = document.createElement('p');
    const newText = document.createTextNode('Hello, World!');
    newParagraph.appendChild(newText);
    document.body.appendChild(newParagraph);
    console.log("5. 动态创建节点", newParagraph, newText);

    // 6. 删除节点
    parent.removeChild(child1);

  </script>

</body>

</html>